<template>
    <div>
        <el-form  :model="params"  ref="ruleForm"  label-position="right" size="large" label-width="110px" class="lager-label-ling-height">
            <el-row style="padding: 15px 15px 0 15px;background: #fff;border-bottom: 1px solid #e5e5e5;">
                <el-col :span="6">
                    <el-form-item label-width="0" >
                        <agent-list style="width: 100%" :agentids="params.agentIds"  v-on:listenToChildEvent="getAentId"></agent-list>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单号" >
                        <el-input style="width: 100%" placeholder="请输入订单号" v-model.trim="params.ordercorde"  clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="用户名称">
                        <el-input style="width: 100%" placeholder="请输入名称" v-model.trim="params.name"  clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="用户电话" >
                        <el-input style="width: 100%" placeholder="请输入电话" v-model.trim="params.mobile"  clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="接单骑手" >
                        <el-input style="width: 100%" placeholder="请输入电话" v-model.trim="params.mobile"  clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="支付方式" >
                        <el-select style="width: 100%" v-model="params.selectOrderTime"  placeholder="请选择" clearable>
                            <el-option label="微信" value="1"></el-option>
                            <el-option label="支付宝" value="2"></el-option>
                            <el-option label="钱包" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="交易平台" >
                        <el-select style="width: 100%" v-model="params.selectOrderTime"  placeholder="请选择" clearable>
                            <el-option label="wap" value="1"></el-option>
                            <el-option label="app" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单来源" >
                        <el-select style="width: 100%" v-model="params.selectOrderTime"  placeholder="请选择" clearable>
                            <el-option label="自然订单" value="1"></el-option>
                            <el-option label="第三方订单" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="日期">
                        <el-select style="width: 100%" v-model="params.selectOrderStatus"  placeholder="请选择" clearable>
                            <el-option label="全部" value="1"></el-option>
                            <el-option label="待接单" value="2"></el-option>
                            <el-option label="进行中" value="3"></el-option>
                            <el-option label="已完成" value="4"></el-option>
                            <el-option label="已取消" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" >
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
                        <el-button @click="restParams()">重置</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <div class="base-table-wrap">
            <el-table :data="tableData.list" stripe style="width: 100%" :empty-text="emptyText">
                <el-table-column type="index" label="#" width="40" align="center"></el-table-column>
                <el-table-column  label="用户信息" min-width="150" align="left">
                    <template slot-scope="scope">
                        <div class="item">{{scope.row.username}} <span style="margin:0 10px; " >|</span> {{scope.row.userphone}}</div>
                        <div>{{scope.row.useraddress}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="businessname" label="商家名称" min-width="140" align="center"></el-table-column>
                <el-table-column  label="支付信息" min-width="120" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.totalpay}}</div>
                        <div>{{scope.row.paytype=='0'?'支付宝':scope.row.paytype=='1'?'微信':scope.row.paytype=='2'?'钱包':'未支付'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="statstr" label="订单状态" min-width="100" align="center"></el-table-column>
                <el-table-column prop="ordercode" label="订单号" min-width="160" align="center"></el-table-column>
                <el-table-column prop="createtime" label="下单时间"  min-width="140" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row.id)" type="text" size="mini">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
            <div class="base-directives-loading" v-show="isloadingTable">
                <div class="el-loading-spinner">
                    <svg viewBox="25 25 50 50" class="circular">
                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                    </svg>
                </div>
            </div>
            <div class="base-pagination clearfix">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="newPage" :pageSize="pageSize"
                               :page-sizes="[10, 20, 30, 40]" background layout="total,sizes, prev, pager, next, jumper"
                               :total="tableData.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="订单信息" v-dialogDrag :visible.sync="dialogTableVisible" width="1000px" :close-on-press-escap="true">
            <div class="flex d-table" id="d-table" style="position: relative">
                <div class="base-directives-loading" v-show="diyLoading">
                    <div class="el-loading-spinner">
                        <svg viewBox="25 25 50 50" class="circular">
                            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                        </svg>
                    </div>
                </div>
                <div class="check-l">
                    <el-card class="state"  shadow="hover">
                        <div class="title">订单进度</div>
                        <ul class="u-st" >
                            <li v-for="(item,index) in curOrderlist.goodsSellOutStatus" :key="index">
                                <div class="wo">{{item.statstr}}</div>
                                <div class="ti">系统：{{item.createtime}}</div>
                            </li>
                        </ul>
                    </el-card>

                    <el-card class="state"  shadow="hover">
                        <div class="title">配送信息</div>
                        <ul class="pay">
                            <li>
                                <span class="ti">预计送达时间：</span>
                                <span class="wo">{{curOrderlist.distime}}</span>
                            </li>
                            <li>
                                <span class="ti">骑手姓名：</span>
                                <span class="wo">{{curOrderlist.shopper}}</span>
                            </li>
                            <li>
                                <span class="ti">骑手电话：</span>
                                <span class="wo">{{curOrderlist.shoppermobile}}</span>
                            </li>
                        </ul>
                    </el-card>
                </div>
                <div class="check-r">
                    <el-card class="msg "  shadow="hover">
                        <span class="title">基本信息</span>
                        <ul class="default flex">
                            <li class="flex-row"><span class="ti">订单号:</span><span>{{curOrderlist.ordercode}}</span></li>
                            <li class="flex-row"><span class="ti">支付方式:</span><span>{{curOrderlist.paytype=='0'?'支付宝':curOrderlist.paytype=='1'?'微信':curOrderlist.paytype=='2'?'钱包':'未支付'}}</span></li>
                            <li class="flex-row"><span class="ti">预订单:</span><span><!--是否--></span></li>
                            <li class="flex-row"><span class="ti">所属城市:</span><span>{{curOrderlist.cityname}}</span></li>
                            <li class="flex-row" style="width: 100%"><span class="ti">订单备注:</span><span>{{curOrderlist.content}}</span></li>
                        </ul>
                    </el-card>
                    <el-card class="msg"  shadow="hover">
                        <span class="title">用户信息</span>
                        <ul class="default flex">
                            <li class="flex-row"><span class="ti">收货人姓名:</span><span>{{curOrderlist.username}}</span></li>
                            <li class="flex-row"><span class="ti">收货人电话:</span><span>{{curOrderlist.usermobile}}</span></li>
                            <li class="flex-row"><span class="ti">下单人电话:</span><span>{{curOrderlist.userphone}}</span></li>
                            <li class="flex-row"  style="width: 100%"><span class="ti">收货人地址:</span><span>{{curOrderlist.useraddress}}</span></li>
                        </ul>
                    </el-card>
                    <el-card class="msg"  shadow="hover">
                        <span class="title">餐厅信息</span>
                        <ul class="default flex">
                            <li class="flex-row"><span class="ti">餐厅名称:</span><span>{{curOrderlist.businessname}}</span></li>
                            <li class="flex-row"><span class="ti">餐厅电话:</span><span>{{curOrderlist.businessmobile}}</span></li>
                            <li class="flex-row"><span class="ti">配送方式:</span><span>{{curOrderlist.isdeliver=='0'?'快车专送':'商家自配送'}}</span></li>
                            <li class="flex-row"><span class="ti">商家服务费率:</span><span>{{curOrderlist.coefficient}}%</span></li>
                        </ul>
                    </el-card>
                    <el-card class="msg"  shadow="hover">
                        <span class="title">菜品信息</span>
                        <ul class="cuisine">
                            <li class="flex-row" v-for="(item,index) in curOrderlist.goodsSellRecordChildren" :key="item.id">
                                <span>{{item.goodssellname|capitalize(item.goodsselloptionname,item.goodssellstandardname)}}</span><span>x{{item.num}}</span><span>{{item.totalprice}}</span>
                            </li>

                            <li class="flex-row">
                                <span></span>
                                <span class="totla">
                                   <!--已优惠金额:{{curOrderlist.price-curOrderlist.totalpay}}元 -->&nbsp;&nbsp;&nbsp;实付:<span class="price">{{curOrderlist.totalpay}}</span>
                               </span>
                            </li>
                        </ul>
                    </el-card>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import agentList from '@/components/agentList'
    export default {
        components: {
            agentList
        },
        data() {
            return {
                typeSearch:'1',
                websock: null,                                  //websock
                datePicker:null,                                //时间转换
                curOrderlist:{},                                //修改 选择数据
                params: {
                    page: 0,
                    size: 10,
                    agentIds: [],                                   //代理商
                    name:'',
                    mobile:'',
                    ordercorde:'',
                    selectOrderTime:'',
                    selectOrderStatus:'',
                },
                isloadingTable: false,                              //表单等待
                diyLoading:true,                                    //自定义等待
                tableData: {},                                      //表单数据
                emptyText: '',                                      //表格请求提示
                newPage: 1,                                         //默认分页
                pageSize:10,                                        //分页数量

                isloadingTable:false,                               //表格请求等待
                dialogTableVisible: false,
            }
        },
        methods: {
            getAentId(item){                                                //获取子组件传递的代理商
                this.params.agentIds = item
            },
            handleClick(id){                                               //查看/修改订单操作
                this.dialogTableVisible = !this.dialogTableVisible
                this.diyLoading = true
                this.$http.get('/server/order/info?id='+id)
                    .then(res => {
                        this.diyLoading = false
                        const datas = res.data
                        if(datas.success){
                            this.$set(this.$data,'curOrderlist',datas.data)
                        }else{
                            this.$alert(datas.errorMsg, '提示！')
                        }
                    })
                    .catch(err => {
                        this.diyLoading = false
                    })

            },
            handleSizeChange(size){                             //切换条数
                this.params.size = size
                this.pageSize = size
                if (this.newPage == 1) {
                    this.params.page = 0
                    this.getTableList()
                } else {
                    this.newPage = 1
                }
            },
            handleCurrentChange(page) {                                     //切换分页
                this.params.page = page -1
                this.getTableList()
            },
            getTableList(){                                                 //获取订单数据
                this.isloadingTable = true
                let params = JSON.parse(JSON.stringify(this.params))
                params.agentIds = params.agentIds.length >0?params.agentIds.join(','):''
                this.$http.get('/server/order/list?'+this.qs.stringify(params))
                    .then(res => {
                        this.isloadingTable = false
                        const datas = res.data
                        if(datas.success){
                            this.$set(this.$data, 'tableData', datas.data)
                        }else{
                            this.$alert(datas.errorMsg, '提示！')
                        }
                    })
                    .catch(err => {
                        this.isloadingTable = false
                        if(!err.Cancel){
                            console.log(err)
                            this.emptyText = '数据加载失败！'
                        }
                    })

            },
            restParams(){                               //清空搜索框
                this.params.agentIds  = [],
                    this.params.name = '',
                    this.params.mobile = '',
                    this.params.ordercorde = '',
                    this.params.timeType = '',
                    this.params.status = '',
                    this.handleSizeChange(10)
            },
        },
        filters:{                                   //商品名称
            capitalize(t1,t2,t3){
                let str = t1;
                if(t2) str += t2
                if(t3) str += `(${t3})`
                return str
            },
        },
        mounted() {
            //this.getTableList()

        },
    }
</script>

<style scoped>
    @import "/css/check.css";
</style>